<template>
    <div class="goods-tabs" >
      <nav>
        <a :class="{active:activeName==='detail'}" href="javascript:;" @click="activeName='detail'">商品详情</a>
        <a :class="{active:activeName==='comment'}" href="javascript:;" @click="activeName='comment'">商品评价<span>(500+)</span></a>
      </nav>
       <goodsTabsDetail v-if="activeName==='detail'" :goods="goodsList"></goodsTabsDetail>
       <goodsTabsComment v-if="activeName==='comment'"></goodsTabsComment>
    </div>
  </template>

<script >
import { ref } from 'vue'
import goodsTabsDetail from './goodsTabsDetail.vue'
import goodsTabsComment from './goodsTabsComment.vue'

export default {
  props: {
    goodsList: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    goodsTabsDetail, goodsTabsComment
  },
  setup() {
    const activeName = ref('detail')
    return { activeName }
  }
}

</script>

  <style scoped lang="less">
  .goods-tabs {
    min-height: 600px;
    background: #fff;
    nav {
      height: 70px;
      line-height: 70px;
      display: flex;
      border-bottom: 1px solid #f5f5f5;
      a {
        padding: 0 40px;
        font-size: 18px;
        position: relative;
        > span {
          color: @priceColor;
          font-size: 16px;
          margin-left: 10px;
        }
        &:first-child{
            border-right: 1px solid #f5f5f5;
        }
        &.active{
          &::before{
        content: "";
        position: absolute;
        left: 40px;
        bottom: -1px;
        width: 72px;
        height: 2px;
        background-color: @xtxColor;
       }

      }
      }

    }
  }

  </style>
